import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { useRef,useState } from 'react';
import { history } from '@umijs/max';
import {
  ModalForm,
  ProFormDatePicker,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
  ProTable,
} from '@ant-design/pro-components';
import {  Col, Form,  Row } from 'antd';
import { get_dept_list_api } from '@/services/public';
import { get_list_api } from './api';

export default function Page() {
  const ref = useRef<ActionType>();
  const [formEdit] = Form.useForm<MeetingBmMsgApi.MeetingBmMsgModelDto>();
  const [context, setContext] = useState<string>('');
  const setDate = (startDate: string, endDate: string) => {
    let startDatev = startDate;
    let endDatev = endDate;
    if (!startDate || startDate === null) {
      startDatev = '';
    }
    if (!endDate || endDate === null) {
      endDatev = '';
    }
    return startDatev + ' - ' + endDatev;
  };
  const columns: ProColumns<MeetingBmMsgApi.MeetingBmMsgList>[] = [
    // {
    //   dataIndex: 'index',
    //   valueType: 'indexBorder',
    //   width: 48,
    // },
    // {
    //   title: '编号',
    //   width: 100,
    //   copyable: true,
    //   search: false,
    //   dataIndex: 'id',
    //   render: (_) => <a>{_}</a>,
    // },
    {
      title: '标题',
      width: 160,
      dataIndex: 'title',
    },
    {
      title: '报名人数',
      width: 80,
      search: false,
      dataIndex: 'shu',
    },
    // {
    //   title: '内容',
    //   search: false,
    //   dataIndex: 'context',
    // },
    {
      title: '会议时间',
      search: false,
      width: 200,
      dataIndex: 'applyBegin',
      render: (_, row) => (
        <div>
          <p>{setDate(row.meetingStartTime, row.meetingStartTime)}</p>
        </div>
      ),
    },
    {
      title: '负责人',
      search: false,
      width: 140,
      dataIndex: 'head',
    },
    {
      title: '负责人电话',
      width: 140,
      search: false,
      dataIndex: 'phone',
    },
    // {
    //   title: '创建人',
    //   search: false,
    //   dataIndex: 'createByName',
    // },
    // {
    //   title: '创建时间',
    //   search: false,
    //   dataIndex: 'createTime',
    // },
    {
      title: '备注',
      search: false,
      width: 140,
      dataIndex: 'remarks',
    },
    {
      title: '操作',
      align: 'left',
      width: 140,
      key: 'option',
      valueType: 'option',
      render: (_, row) => {
        return [
          <ModalForm<MeetingBmMsgApi.MeetingBmMsgModelDto>
            key="view"
            title="查看详情"
            width={600}
            submitter={{resetButtonProps: { type: 'dashed'},submitButtonProps: { style: { display: 'none', }}}}
            modalProps={{
              destroyOnClose: true,
              maskClosable: false,
              onCancel: () => {
                setContext(''); 
              },
            }}
            trigger={
              <a onClick={() => {
                  setTimeout(() => {
                    // 延迟填入数据，为了防止from未创建
                    console.log(row);
                    setContext(row.context);
                    let arrparticipateInDept=row.participateInDept.split(",");
                    row['arrparticipateInDept']=arrparticipateInDept;
                    formEdit.setFieldsValue(row);
                  }, 100);
                }}
              >
                查看详情
              </a>
            }
            form={formEdit}
            autoFocusFirstInput
          >
          <Row gutter={24}>
            <Col span={12}>
                <ProFormText
                  disabled
                  rules={[{ required: true, message: '请输入标题' }]}
                  placeholder="请输入标题"
                  name="title"
                  label="标题"
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  disabled
                  rules={[{ required: true, message: '请输入会议地址' }]}
                  placeholder="请输入会议地址"
                  name="address"
                  label="会议地址"
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  disabled
                  rules={[{ required: true, message: '请输入负责人' }]}
                  placeholder="请输入负责人"
                  name="head"
                  label="负责人"
                />
              </Col>
              <Col span={12}>
                <ProFormText
                  disabled
                  rules={[{pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,message: '请输入正确的手机号'}]}
                  placeholder="请输入负责人电话"
                  name="phone"
                  label="负责人电话"
                />
              </Col>
              <Col span={12}>
                <ProFormDatePicker disabled name="meetingStartTime" label="会议开始时间"  fieldProps={{
                    showTime:true,
                    format:'YYYY-MM-DD HH:mm:ss'
                }}    />
              </Col>
              <Col span={12}>
                <ProFormDatePicker disabled  fieldProps={{
                    showTime:true,
                    format:'YYYY-MM-DD HH:mm:ss'
                }} name="meetingEndTime" label="会议结束时间"     />
              </Col>
              <Col span={24}>
                <ProFormTreeSelect disabled
                  name="arrparticipateInDept"
                  label="部门"
                  request={async () => {
                    const res = await get_dept_list_api();
                    console.log(res.data);
                    if (res.data.length > 0) {
                      return res.data;
                    }
                    return [];
                  }}
                  fieldProps={{
                    showArrow: true,
                    showSearch: true,
                    multiple:true,
                    dropdownMatchSelectWidth: false,
                    autoClearSearchValue: true,
                    filterTreeNode: true,
                    treeNodeFilterProp: 'deptName',
                    fieldNames: { label: 'deptName', value: 'id', children: 'routes' },
                  }}
                  placeholder="请选择部门"
                  rules={[{ required: true, message: '请选择部门' }]}
                />
              </Col>
              <Col span={24}>
              <div   dangerouslySetInnerHTML={{__html:context}} >     
               </div>
              </Col>
              <Col span={24}>
                <ProFormTextArea disabled placeholder="请输入备注" name="remarks" label="备注" />
              </Col>
            </Row>
          </ModalForm>,
          <a
          key="view"
          style={{ color: '#409EFF',width:'100'}}
          onClick={() => {
             //open('/sys/User')
             history.push(`/data/application/boUser/`+row.id);
          }}
        >
           查看报名列表
        </a>
        ];
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable<MeetingBmMsgApi.MeetingBmMsgList>
        actionRef={ref}
        request={async (params = {}) => {
          const columnFilters: any = {};
          Object.keys(params).forEach((key) => {
            if (key !== 'current' && key !== 'pageSize') {
              columnFilters[key] = {
                eq: '%',
                name: key,
                value: params[key],
              };
            }
          });
          const res = await get_list_api({
            columnFilters: columnFilters,
            pageNum: params?.current ?? 1,
            pageSize: params?.pageSize ?? 10,
          });

          return {
            page: params?.current,
            data: res.data.records,
            success: true,
            total: res.data.total,
          };
        }}
        rowKey="id"
        pagination={{
          pageSize: 10,
        }}
        columns={columns}
        dateFormatter="string"
      />
    </PageContainer>
  );
}
